<template>
  <div class="home">
    <banner :list="list"></banner>
    <van-grid :column-num="3">
      <van-grid-item
        v-for="(val, index) in categories"
        :key="index"
        :icon="val.coverImg"
        :text="val.name"
        :to="{ name: 'Fenlei', params: { name: val.name } }"
      />
    </van-grid>
    <ul class="product_r">
      <li v-for="item in products" :key="item._id" @click="godetail(item._id)">
        <img :src="item.coverImg" alt="" />
        <div class="product_r">
          <h3>{{ item.name }}</h3>
          <p>{{ item.price }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { reqProducts, getcategories } from "../../api/product";
import banner from "@/pages/home/banner";
export default {
  data() {
    return {
      list: [
        "	https://p1.music.126.net/SBLswFYQ9CV-XWqH-x41dA==/109951167744079273.jpg?imageView&quality=89",
        "	https://p1.music.126.net/z14Qrwd0y7TsSnyzNgvmvA==/109951167744148599.jpg?imageView&quality=89",
        "	https://p1.music.126.net/PCadzsrtHAzD5iXgA4f6wQ==/109951167744184787.jpg?imageView&quality=89",
        "	https://p1.music.126.net/KTX1xi962XQgR-Sbt0o-Qw==/109951167743969064.jpg?imageView&quality=89",
        "	https://p1.music.126.net/z14Qrwd0y7TsSnyzNgvmvA==/109951167744148599.jpg?imageView&quality=89",
      ],
      products: [],
      categories: [],
    };
  },
  computed: {},
  watch: {},

  methods: {
    async initProducts() {
      const result = await reqProducts();
      console.log(result);
      this.products = result.products;
    },
    godetail(id) {
      this.$router.push("/detail/" + id);
    },
    async producttype() {
      let res = await getcategories();
      console.log(res.categories);
      this.categories = res.categories;
    },
  },
  created() {
    this.initProducts();
    this.producttype();
  },
  mounted() {},
  components: {
    banner,
  },
};
</script>
<style scoped>
.home {
  padding-bottom: 40px;
}
.product_r li {
  display: flex;
  padding: 10px;
}
.product_r li img {
  width: 80px;
  height: 80px;
  display: block;
}
.product_r li .product_r {
  flex: 1;
  padding-left: 10px;
}
.product_r li .product_r h3 {
  font-size: 13px;
  color: #888;
}
</style>
